<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
    {include file="common/head" /}
</head>
<body>
{include file="common/menuLeft" /}
<section class="Hui-admin-article-wrapper">
{include file="common/menuTop" /}
    <div class="Hui-admin-article">
        <nav class="breadcrumb" style="background-color:#fff;padding: 0 24px">
            首页
            <span class="c-gray en">/</span>
            商品列表
        </nav>
        <article class="Hui-admin-content clearfix">
            <div class="panel">
                <div class="panel-body">
                    <div class="row clearfix">
                        <div class="col-xs-12 col-sm-6 col-md-4">
                            <div class="row clearfix mb-10">
                                <span class="col-xs-4 form-item-label">商品名称：</span>
                                <span class="col-xs-8 form-item-control">
										<input type="text" name="goods_name" id="goods_name" placeholder=" 商品名称" class="input-text" />
									</span>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-4">
                            <div class="row clearfix mb-10">
                                <span class="col-xs-4 form-item-label">名称简写：</span>
                                <span class="col-xs-8 form-item-control">
										<input type="text" name="goods_simple_name" id="goods_simple_name" placeholder=" 名称简写" class="input-text" />
									</span>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-4">
                            <div class="row clearfix mb-10">
                                <span class="col-xs-4 form-item-label">货号：</span>
                                <span class="col-xs-8 form-item-control">
										<input type="text" name="goods_sn" id="goods_sn" placeholder=" 货号" class="input-text" />
									</span>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-4">
                            <div class="row clearfix mb-10">
                                <span class="col-xs-4 form-item-label">条形码：</span>
                                <span class="col-xs-8 form-item-control">
										<input type="text" name="goods_code" id="goods_code" placeholder=" 条形码" class="input-text" />
									</span>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-4 col-md-1">
                            <div class="row clearfix">
									<span class="col-xs-4 form-item-control">
										<button name="" id="search-submit" class="btn btn-success radius" type="submit"><i class="Hui-iconfont">&#xe665;</i> 搜索</button>
									</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="panel mt-20">
                <div class="panel-body">
                    <div class="clearfix">
							<span class="f-l">
							<a href="javascript:;" onclick="datadel()" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a>
							<a class="btn btn-primary radius" onclick="goods_add('添加商品','{:url('goods/goods_add')}')" href="javascript:;"><i class="Hui-iconfont">&#xe600;</i> 添加商品</a>

                                <a class="btn btn-success radius" onclick="layer.alert('暂无功能')" href="javascript:;"><i class="Hui-iconfont">&#xe644;</i> 生成报价单</a>
							</span>
                        <span class="f-r">共有数据：<strong id="all_number">0</strong> 条</span>
                    </div>
                    <div class="mt-20 clearfix">
                        <table id="data-table-list" class="table table-border table-bordered table-bg table-hover table-sort">
                            <thead>
                            <tr class="text-c">
                                <th width="25"><input type="checkbox" name="" value=""></th>
                                <th width="50">ID</th>
                                <th>商品名称</th>
                                <th width="200">名称简写</th>
                                <th width="150">货号</th>
                                <th width="150">条形码</th>
                                <th width="75">报价单价格</th>
                                <th width="75">库存</th>
                                <th width="120">操作</th>
                            </tr>
                            </thead>
                            <tbody class="getData-list" data-currPage='1'>
                            </tbody>
                        </table>
                    </div>
                    <div id="laypage" class="text-c mt-20"></div>
                </div>
            </div>
        </article>
    </div>
</section>

{include file="common/footer" /}

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="__ROOT__/lib/datatables/1.10.15/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="__ROOT__/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="__ROOT__/static/business/js/main.js"></script>
<!--/请在上方写此页面业务相关的脚本-->
<script type="text/javascript">
    // 获取URL参数，初始化条件
    function getUrlParameter(){
        // parseQueryString() 方法 在main.js中 提取URL参数为对象
        var urlObj = parseQueryString(window.location.href);
        //console.log(urlObj);
        $(".getData-list").attr("data-currPage",urlObj.currPage)
        $("#search-datetime-start").val(urlObj.datetimeStart);
        $("#search-datetime-end").val(urlObj.datatimeEnd);
        $("#search-input").val(urlObj.keywords);
    }
    function goods_del () {
        layer.msg('暂未实现功能！')
    }
    function datadel (){
        layer.msg('暂未实现功能！')
    }
    // 封装一个获取数据列表的方法，将条件封装到options对象中
    function getDataList(options){
        // console.log(options);
        $.ajax({
            url: "{:url('goods/getList')}",// 跳转到 action, 换成自己的接口
            data: options,
            type: 'get',
            cache: false,
            dataType: 'json', // 不一定非要json，可以是html，后台封好结构后，直接扔前台
            success: function(respData) {
                // console.log(respData)
                if(respData.data.result){ // 请求正确 返回true, 也指200状态
                    var data = respData.data.datas; // 返回的数据
                    $('#all_number').text(respData.data.pagination.total)
                    //console.log(data)
                    var htmlstr = '';
                    if(data.length > 0 ) {
                        // 只有获取的数据对象长度大于0，我们才做for循环处理。
                        for(var i = 0;i< data.length;i++){ // for循环将json数据拼接成html结构。 此处可以用模板引擎。
                            htmlstr +=
                                '<tr>'+
                                '<td class="text-c"><input type="checkbox" value="'+data[i].goods_id+'" name=""></td>'+
                                '<td class="text-c">'+ data[i].goods_id +'</td>'+
                                '<td class="text-l"><u style="cursor:pointer" class="text-primary" onClick="goods_edit(\'编辑商品\',\'{:url('goods/goods_edit')}\','+data[i].goods_id+')" title="查看">'+ data[i].goods_name +'</u></td>'+
                                '<td data-id="'+data[i].goods_id+'">'+ data[i].goods_simple_name +'</td>'+
                                '<td class="text-c" data-id="'+data[i].goods_id+'">'+data[i].goods_sn+'</td>'+
                                '<td class="text-c">'+data[i].goods_code+'</td>'+
                                '<td class="text-c">'+data[i].goods_quotation+'</td>'+
                                '<td class="text-c"></td>'+
                                '<td class="text-c">' +
                                '<a onClick="goods_edit(\'编辑商品\',\'{:url('goods/goods_edit')}\','+data[i].goods_id+')" style="text-decoration:none" class="ml-5" href="javascript:;" title="编辑"><i class="Hui-iconfont">&#xe6df;</i></a>' +
                                '<a onClick="goods_del(this,'+ data[i].goods_id +')"style="text-decoration:none" class="ml-5 del" href="javascript:;" title="删除"><i class="Hui-iconfont">&#xe6e2;</i></a>' +
                                '</td>';
                            htmlstr += '</td>'+
                                '</tr>';
                        }
                        // 在页面对应<tbody class=".getData-list">标签中输出拼接好的html结构。
                        $(".getData-list").html(htmlstr);

                        // 渲染分页
                        laypage({
                            cont: 'laypage',    //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：&lt;div id="laypage">&lt;/div>
                            pages: Math.ceil(respData.data.pagination.total/respData.data.pagination.pageSize),  // 除法运算，向上取整
                            curr: respData.data.pagination.currPage,    //初始化当前页
                            hash: 'page',
                            limit: respData.data.pagination.pageSize,
                            limits: [10, 25, 50, 100],
                            first: '首页',
                            last: '尾页',
                            prev: '<em>&lt;&lt;</em>',
                            next: '<em>&gt;&gt;</em>',
                            jump: function(e, first){ //触发分页后的回调
                                //console.log(e);
                                if(!first) {
                                    $(".getData-list").attr("data-currPage", e.curr);
                                    runGetDataList();
                                }
                            }
                        });
                    }else {
                        console.log(respData.msg); // 返回正确状态，但是没有数据，在此处处理。
                        var tdNum = $("#data-table-list thead tr th").length;
                        htmlstr = '<tr><td colspan="'+tdNum+'" class="data-null" style="text-align: center">数据为空</td></tr>';
                        $(".getData-list").html(htmlstr);
                    }
                }else {
                    console.log(respData.msg);  // 返回错误状态，通常指网络请求失败、后台报错等，最好后台给出错误提示，方便前台调试。也可定义几种返回的错误状态码，如201 203 400 404 500 503等。
                }
            },
            error: function(respData){ // ajax的error状态
                console.log(respData);
            }
        });
    }

    // 运行获取数据列表这个方法，这里面可以灵活自定义要传递的参数
    function runGetDataList(){
        getDataList({
            currPage : $(".getData-list").attr("data-currPage") || 1, // 当前第几页
            pageSize: 10, // 每页几条
            goods_name : $("#goods_name").val() || '',
            goods_simple_name : $("#goods_simple_name").val() || '',
            goods_sn : $("#goods_sn").val() || '',
            goods_code : $("#goods_code").val() || '',
        });
    }

    $(function(){
        getUrlParameter(); // 获取URL参数，初始化条件
        runGetDataList(); // 页面载入，自执行加载数据...
        // 点击搜索执行...
        $("#search-submit").on("click",function(){
            runGetDataList();
        });
    });
</script>
</body>
</html>